<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Web Application | todo</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/animate.css" type="text/css" />
  <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/font.css" type="text/css" cache="false" />
  <link rel="stylesheet" href="<?php echo base_url(); ?>assets/js/fuelux/fuelux.css" type="text/css" />
  <link rel="stylesheet" href="<?php echo base_url(); ?>assets/js/datatables/datatables.css" type="text/css" />
  <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/plugin.css" type="text/css" />
  <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/app.css" type="text/css" />
  <style type="text/css">
  body {
	background-color: #716C9F;
}
  </style>

  <!--[if lt IE 9]>
    <script src="js/ie/respond.min.js" cache="false"></script>
    <script src="js/ie/html5.js" cache="false"></script>
    <script src="js/ie/fix.js" cache="false"></script>
  <![endif]-->
</head>
<body>
  <section class="hbox stretch">
								
  
            <div class="datatables" id="datatable">
              <section class="panel">
                <header class="panel-heading text-center" >
                  <h2>Data Absensi</h2> 
                  <i class="fa fa-info-sign text-muted" data-toggle="tooltip" data-placement="bottom" data-title="ajax to load the data."></i> 
                </header>
                <div class="table-responsive">
                  <table class="table table-striped table-hover" data-ride="datatables">
                    <thead>
                      <tr style="text-decoration: none; color: #000; font-family: Tahoma, Geneva, sans-serif; font-size: medium; background: #828195;">
                        <th width="11%" > ID ABSEN</th>
                        <th width="10%" > ID USER</th>
                        <th width="15%" > JAM MASUK</th>
                        <th width="15%" > JAM PULANG</th>
                        <th width="11%">  KETERANGAN</th>
                        <th width="11%">  LIHAT FOTO </th>
                                          
                        
                      </tr>
                    </thead>
                    <tbody>
					
					
					
                                       
   
                    </tbody>
                  </table>
                </div>
              </section>
            </div>
          </div>
</section>
      </section>
      <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen" data-target="#nav"></a>
    </section>
    <!-- /.vbox -->
  </section>
	<script src="<?php echo base_url(); ?>assets/js/jquery.min.js"></script>
  <!-- Bootstrap -->
<script src="<?php echo base_url(); ?>assets/js/bootstrap.js"></script>
  <!-- App -->
<script src="<?php echo base_url(); ?>assets/js/app.js"></script>
<script src="<?php echo base_url(); ?>assets/js/app.plugin.js"></script>
<script src="<?php echo base_url(); ?>assets/js/app.data.js"></script>
  <!-- fuelux -->
<script src="<?php echo base_url(); ?>assets/js/fuelux/fuelux.js"></script>
<script src="<?php echo base_url(); ?>assets/js/libs/underscore-min.js"></script>
  <!-- datatables -->
<script src="<?php echo base_url(); ?>assets/js/datatables/jquery.dataTables.min.js"></script>
  <!-- Sparkline Chart -->
<script src="<?php echo base_url(); ?>assets/js/charts/sparkline/jquery.sparkline.min.js"></script>
  <!-- Easy Pie Chart -->
<script src="<?php echo base_url(); ?>assets/js/charts/easypiechart/jquery.easy-pie-chart.js"></script>
<script>
  $('[data-ride="datatables"]').each(function() {
		var oTable = $(this).dataTable( {
			"bProcessing": true,
			"sAjaxSource": "<?php echo base_url()?>index.php/absensi/json_tampil",
			"sDom": "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>",
			"sPaginationType": "full_numbers",
			"aoColumns": [
				{ "mData": "ID_ABSEN" },
				{ "mData": "ID_USER" },
				{ "mData": "JAM_MASUK" },
				{ "mData": "JAM_PULANG" },
   	            //{ "mData": "PATH_FOTO" },
				//{ "mData": "PATH_FOTO2" },
				{ "mData": "KETERANGAN" },
                { "mData": "ID_ABSEN" , 
            "mRender" : function ( data, type, full ) {
            return '<a align="centre" class="btn btn-xs btn-info" href="<?php echo base_url(); ?>index.php/absensi/lihatfoto/'+data+'">LIHAT FOTO</a> ';}
                
               
  }
			]
		} );
	});
  </script>
  
</body>
</html>
